<template>
  <div class="wrapper">
    <h2>软件包</h2>
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="动作">
          <div>
            <div class="tips">
              <p style="color: #32325d; font-weight: 700">备份/恢复</p>
              <span style="color: #999"
                >点击“生成备份”下载当前配置文件的 tar
                存档。要将固件恢复到初始状态，请单击“执行重置”（仅 squashfs
                格式的固件有效）。</span
              >
            </div>

            <div class="btn_event">
              <div>
                <span>下载备份：</span><button class="btn">生成备份</button>
              </div>
              <div class="reset">
                <span>恢复到出厂设置：</span
                ><button class="btn btn_reset">执行重置</button>
              </div>
            </div>

            <p style="color: #999">上传备份存档以恢复配置</p>
            <div class="recover">
              <span>恢复配置：</span>
              <input type="file" name="" id="" class="upload_input" />
              <button class="btn upload_btn">上传备份</button>
            </div>

            <div class="tips">
              <p style="color: #32325d; font-weight: 700">刷写新的固件</p>
              <span style="color: #999"
                >上传一个 sysupgrade
                格式的固件映像文件以替换当前运行的固件。勾选“保留配置”以使更新后的系统仍然使用当前的系统配置（新的固件需要和当前固件兼容）。</span
              >
            </div>

            <div class="save">
              <span>保留配置：</span>
              <el-checkbox v-model="checked"></el-checkbox>
            </div>

            <div class="recover">
              <span>固件文件：</span>
              <input type="file" name="" id="" class="upload_input" />
              <button class="btn upload_btn">刷写固件</button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置">
          <div :style="{ display: show ? 'block' : 'none' }">
            <div>
              <span style="color: #999"
                >系统升级时要保存的配置文件和目录的清单。目录 /etc/config/
                内修改过的文件以及部分其他配置会被自动保存。</span
              >
            </div>
            <div class="list" @click="openList">
              <span>显示当前备份文件列表</span>
              <button class="btn openList">打开列表...</button>
            </div>
            <div class="input_textArea">
              <el-input type="textarea" :rows="30" v-model="textareaContent">
              </el-input>
            </div>

            <button class="btn submit_btn">提交</button>
            <button class="btn recover_btn">复位</button>
          </div>
          <div :style="{ display: show ? 'none' : 'block' }">
            <div>
              <span style="color: #999"
                >下面是待备份的文件清单。包含了更改的配置文件、必要的基础文件和用户自定义的需备份文件。</span
              >
            </div>
            <div class="list" @click="closeList">
              <span>返回至配置</span>
              <button class="btn openList">关闭列表...</button>
            </div>
            <div class="input_textArea">
              <p>/etc/asound.conf</p>
              <p>/etc/config/AdGuardHome</p>
              <p>/etc/asound.conf</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      textareaContent:
        "## This file contains files and directories that should",
      show: true,
    };
  },
  methods: {
    openList() {
      this.show = false;
    },
    closeList() {
      this.show = true;
    },
  },
};
</script>

<style scoped>
.wrapper {
  padding: 0 0 0 20px;
}
h2 {
  font-size: 1.5rem;
  font-weight: 400;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #be9e9e;
  background-color: #413a76;
  border-right-color: #dcdfe6;
  border-left-color: #dcdfe6;
}
.btn {
  background-color: #4d418b;
  color: #fff;
  width: 100px;
  height: 35px;
  border-radius: 0.2rem;
  border: none;
}
.btn_reset {
  background: #2dce89;
}
.reset {
  margin-top: 20px;
  margin-left: -40px;
}
.upload_input {
  border: 1px solid #ccc;
  padding: 3px;
}
.upload_btn {
  margin-left: 5px;
  margin-top: -5px;
}
.btn_event,
.save,
.recover {
  margin-top: 20px;
}
.btn_event,
.recover,
.save {
  padding-left: 300px;
}
.list {
  padding-left: 150px;
  margin: 20px 0;
}
.openList {
  margin-left: 10px;
}
.submit_btn {
  background: #825ee4;
  float: right;
  margin-top: 15px;
}
.recover_btn {
  background: #2dce89;
  float: right;
  margin-top: 15px;
  margin-right: 10px;
}
</style>